import React from 'react'
import { StyleSheet, Text, TouchableOpacity } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'

export default class Loading extends React.Component {
  render () {
    return (
      <TouchableOpacity style={styles.fullPageWrapper} onPress={()=>{
        this.props.onPress && this.props.onPress()
      }}
      activeOpacity={1}>
        {this.props.children ? this.props.children : <Text style={styles.loadingInProcessing}>{this.props.loading}</Text>}
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  fullPageWrapper: {
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
  },
  loadingInProcessing: {
    // display: 'block',
    width: px2dp(250),
    height: px2dp(150),
    lineHeight: px2dp(150),
    textAlign: 'center',
    fontSize: px2dp(30),
    borderRadius: px2dp(20),
    color: '#ffffff',
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  }
})